import React, { useEffect, useState } from 'react';

export default function TestPage() {
  const [data, setData] = useState([
    {
      id: 1,
      text: '11111111',
    },
    {
      id: 2,
      text: '11111111',
    },
    {
      id: 3,
      text: '11111111',
    },
    {
      id: 4,
      text: '11111111',
    },
    {
      id: 5,
      text: '11111111',
    },
    {
      id: 6,
      text: '11111111',
    },
  ]);
  const [col, setCol] = useState(1);
  const [colMargin, setColMargin] = useState(0);
  const [margin, setMargin] = useState(0);

  return (
    <>
      <div>
        列数：{' '}
        <input
          type="text"
          value={col}
          onChange={(e) => {
            let val = Number(e.target.value);
            setCol(val);
          }}
        />
      </div>
      <div>
        列距：{' '}
        <input
          type="text"
          value={colMargin}
          onChange={(e) => {
            let val = Number(e.target.value);
            setColMargin(val);
          }}
        />
      </div>
      <div>
        margin：{' '}
        <input
          type="text"
          value={margin}
          onChange={(e) => {
            let val = Number(e.target.value);
            setMargin(val);
          }}
        />
      </div>
      <div
        style={{
          display: 'flex',
          flexDirection: 'row',
          flexWrap: 'wrap',
          border: '1px solid red',

          // display: 'grid',
          // gridTemplateColumns: `repeat(${col}, 1fr)`,
          // gridGap: '10px',
        }}>
        {data.map((i) => (
          <div
            style={{
              width: `calc(${100 / col}% - ${margin * 2 + colMargin}px)`,
              padding: '10px',
              border: '1px solid red',
              boxSizing: 'border-box',
              margin: `${margin}px ${margin + colMargin}px ${margin}px ${margin}px`,
            }}>
            {`width: calc(${100 / col}% - ${(margin + colMargin) * 2}px)----margin: ${margin}px ${
              margin + colMargin
            }px ${margin}px ${margin}px`}
          </div>
        ))}
      </div>
    </>
  );
}
